<template>
  <van-tabbar :model="active">
    <van-tabbar-item v-for="(item,index) in tabs"
                     :key= "item.name"
                     :name= "item.name"
                     :icon= "item.icon"
                     @click= "tab(index,item.name)">
      {{item.title}}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'footer-tabs',
  data () {
    return {
      tabs: [{
        name: 'Home',
        icon: 'home-o',
        title: '标签1'
      }, {
        name: 'About',
        icon: 'home-o',
        title: '标签1'
      }, {
        name: 'tab3',
        icon: 'home-o',
        title: '标签1'
      }],
      active: 'tab2'
    }
  },
  methods: {
    tab (index, val) {
      this.$router.push(val)
    }
  }
}
</script>

<style scoped>

</style>
